<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>监视姓名</title>
</head>
<!-- 
    computed 可以完成的效果可以被 watch 完成
    watch 可以完成的 computed 不一定可以 比如异步任务
    Vue 管理的函数最好都是普通函数 箭头函数会指向window
    Ajax 定时器的回调函数都是非 Vue 管理的最好写成箭头函数

 -->

<body>
    <div id="root">
        姓：<input type="text" v-model="firstname"><br><br>
        名：<input type="text" v-model="lastname"><br><br>
        姓名：<span>{{fullname}}</span>
    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                firstname: "张",
                lastname: "三",
                fullname: "张-三"
            },
            watch: {
                firstname(newValue) {
                    // 延时一秒 异步完成
                    setTimeout(() => {
                        this.fullname = newValue + "-" + this.lastname
                    }, 1000)

                },
                lastname(newValue) {
                    // 定时器不是被Vue管理的所以可以使用箭头函数,由windoiw管理
                    setTimeout(() => {
                        console.log(this)
                        this.fullname = this.firstname + "-" + newValue
                    }, 1000)

                },

            }
        })


    </script>

</body>

</html>